<template name="home">
	<view class="check">
		<img src="/static/img/bg.png" alt="" class="hubg" />
		<view class="login-bg">
			<view class="login-card">
				<view class="biaoti">请输入您的姓名及证件号码</view>
				<view class="cu-bar bg-white search">
					<view class="search-form">
						<img src="/static/img/xm.png" alt="" class="icon">
						<input type="text" placeholder="请输入您的真实姓名" v-model="data.username"></input>
						<img src="/static/red/txl.png" alt="" class="txl" @click="mail">
					</view>
				</view>
				<view class="cu-bar bg-white search">
					<view class="search-form" style="position: relative;">
						<img src="/static/img/zhengtype.png" alt="" class="icon">
						<view class="uni-list" style="width: 80%;">
							<view class="uni-list-cell">
								<view class="uni-list-cell-db">
									<picker @change="bindPickerChange" :value="index" :range="array">
										<view class="uni-input">{{array[index]}}</view>
										<!-- <text style="color: #797979;font-size:26upx" >{{
											index ? '' : "请选择证件类型"
										}}</text> -->
									</picker>
								</view>
							</view>
						</view>
						<img src="/static/img/xia.png" alt="" class="icon"
							style="position:absolute;right:10px;top:24upx">
					</view>
				</view>

				<view class="cu-bar bg-white search">
					<view class="search-form">
						<img src="/static/img/zj.png" alt="" class="icon">
						<input type="text" v-model="data.card" placeholder="请输入证件号码" @input="idCardChange"></input>
					</view>
				</view>
				<view class="tips" @click="CheckboxChange(true)">
					<view class="checkbox" v-if="checked">
						<text class="lg text-white" :class="'cuIcon-check'"></text>
					</view>
					<view class="checkbox2" v-else >
					</view>
					是否设为常用人
				</view>
				<view class="padding flex flex-direction">
					<button class="cu-btn blue margin-tb-sm lg" @click="check">
						下一步
					</button>

				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from "vuex";
	export default {
		name: "home",
		components: {},
		data() {
			return {
				title: "Hello",
				data: {
					username: "",
					card: "",
					cardType: 1,
				},
				item: "",
				index: 0,
				array: [
					"大陆居民身份证",
					"港澳台身份证",
					"外国人永久居留身份证",
					"其他证件",
				],
				checked: true
			};
		},
		computed: {
			...mapState({
				user: "user",
			}),
		},

		onShow() {
			let mail = uni.getStorageSync("mail");
			if (mail) {
				this.data.card = mail.idCard;
				this.data.username = mail.name;
				uni.setStorageSync("mail", "");
			}
		},
		methods: {
			...mapMutations({
				setUser: "setUser",
			}),
			CheckboxChange(e) {
				this.checked = !this.checked

			},
			bindPickerChange(e) {
				console.log("picker发送选择改变，携带值为", e.target.value);
				this.index = e.target.value;
			},
			idCardChange($event) {
				this.data.card = $event.target.value.replace(/\s+/g, "");
			},
			check() {
				// if(!this.index){
				// 	uni.showToast({
				// 	    icon: "none",
				// 	    title: "请选择证件类型",
				// 	    duration: 2000
				// 	});
				// 	return;
				// }
				if (!this.data.username) {
					uni.showToast({
						icon: "none",
						title: "请填写真实姓名",
						duration: 2000,
					});
					return;
				}
				if (this.index == 0) {
					if (
						!/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(
							this.data.card
						)
					) {
						uni.showToast({
							icon: "none",
							title: "身份证格式错误",
							duration: 2000,
						});
						return;
					} else {
						this.data.cardType = 1;
					}
				}
				if (this.index == 1 || this.index == 2 || this.index == 3) {
					if (!this.data.card) {
						uni.showToast({
							icon: "none",
							title: "请填写证件号码",
							duration: 2000,
						});
						return;
					} else if (this.index == 1) {
						this.data.cardType = 2;
					} else if (this.index == 2) {
						this.data.cardType = 3;
					} else if (this.index == 3) {
						this.data.cardType = 4;
					}
				}
				if(this.checked){
					uni.showLoading({
					  title: "提交中",
					  mask: true,
					});
					this.$http
					  .post(
					    "/tenant/contacts/add",
					    {
					      defaultInfo: 1,
					      idCard: this.data.card,
					      name: this.data.username,
					      phoneNumber: uni.getStorageSync("phone"),
					    },
					    {
					      header: {
					        "Content-Type": "application/json;charset=UTF-8",
					      } /* 会覆盖全局header */,
					      dataType: "json",
					      responseType: "text",
					    }
					  )
					  .then((res) => {
					    let data = res.data;
					    if (data.code == 0) {
					      uni.hideLoading();
					     uni.navigateTo({
					     	url: "/pages/camera/camera?user=" + JSON.stringify(this.data),
					     });
					    } else {
					      uni.showToast({
					        image: "/static/img/warn.png",
					        title: data.msg,
					        duration: 2000,
					        mask: true,
					      });
					    }
					  });
				}else{
				uni.navigateTo({
					url: "/pages/camera/camera?user=" + JSON.stringify(this.data),
				});	
				}
				
			},
			mail() {
				uni.setStorageSync("mail", "");
				uni.navigateTo({
					url: "/pages/mail/mail?type=select",
				});
			},
		},

		watch: {},
		onLoad(item) {
			uni.showLoading({
				title: "加载中",
				mask: true,
			});
			this.$http
				.get(
					"/tenant/contacts/selectDefault", {
						phoneNumber: uni.getStorageSync("phone"),
					}, {
						header: {
							"content-type": "application/json;charset=UTF-8",
						} /* 会覆盖全局header */ ,
						dataType: "json",
						responseType: "text",
					}
				)
				.then((res) => {
					uni.hideLoading();
					let data = res.data;
					if (data.code == 0) {
						this.data.card = data.data.idCard;
						this.data.username = data.data.name;
					} else {
						uni.showToast({
							image: "/static/img/warn.png",
							title: data.msg,
							duration: 2000,
							mask: true,
						});
					}
				});
		},
	};
</script>

<style lang="scss">
	.check {
		.cu-bar .search-form {
			height: 88rpx !important;
			border-radius: 8px;
			line-height: 88rpx !important !important;
		}
	}

	.hubg {
		position: fixed;
		top: 0;
		height: 300rpx;
		z-index: -1;
		width: 100%;
	}

	.icon {
		width: 32rpx;
		height: 32rpx;
		margin-left: 5px;
		margin-right: 5px;
	}

	.biaoti {
		font-size: 14px;
		font-family: AlibabaPuHuiTiR;
		font-weight: 400;
		color: rgba(255, 145, 37, 1);
		margin-left: 20px;
		margin-top: 20px;
		margin-bottom: 20px;
	}

	.content {
		/* height: 400px; */
		/* height:100vh */
		height: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: column;
	}

	.loginpart {
		flex: 1;
	}

	.landing {
		height: 84upx;
		line-height: 84upx;
		border-radius: 44upx;
		font-size: 32upx;
		background: #4382ff;
	}

	.login-btn {
		padding: 10upx 20upx;
		margin-top: 350upx;
	}

	.login-function {
		overflow: auto;
		padding: 20upx 20upx 30upx 20upx;
	}

	.login-forget {
		float: left;
		font-size: 26upx;
		color: #999;
	}

	.login-register {
		color: #666;
		float: right;
		font-size: 26upx;
	}

	.login-input input {
		background: #f8f8f8;
		font-size: 28upx;
		padding: 10upx 25upx;
		height: 62upx;
		line-height: 62upx;
		border-radius: 8upx;
	}

	.login-margin-b {
		margin-bottom: 25upx;
	}

	.login-input {
		padding: 10upx 20upx;
	}

	.login-head {
		font-size: 46upx;
		text-align: center;
		padding: 25upx 10upx 55upx 10upx;
		display: flex;
		justify-content: center;
	}

	.login-card {
		background: #fff;
		border-radius: 12upx;
		padding: 10upx 25upx;
		box-shadow: 0 6upx 18upx rgba(0, 0, 0, 0.12);
		position: relative;
		/* margin-top: 120upx; */
	}

	.login-bg {
		height: 260upx;
		padding: 25upx;
		background: #4382ff;
	}

	.liji {
		font-size: 24upx;
		color: #787878;
	}

	.lijil,
	.lijir {
		color: #4382ff;
	}

	.lijir {
		margin-left: 10upx;
	}

	.blue {
		background: #4382ff !important;
		color: white;
	}

	.xieyi {
		color: #ff9429;
	}

	.yiyuedu {
		color: #7c7c7c;
	}

	.foot {
		justify-content: center;
		align-items: center;
	}

	.banner {
		width: 100%;
		/* position: absolute; */
		/* bottom: 42px; */
		height: 164upx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffa98a;
	}

	.hubg {
		position: absolute;
		top: 0;
		height: 300rpx;
		z-index: -1;
		width: 100%;
	}

	.userAvatarUrl {
		height: 100px;
		width: 100px;
	}

	.userinfo-avatars {
		overflow: hidden;
		display: block;
		width: 160rpx;
		height: 160rpx;
		margin: 20rpx;
		/* border-radius: 50%; */
		border: 2px solid #fff;
		box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
		/* margin-left: 10px; */
	}

	.txl {
		height: 30px;
		width: 30px;
		margin-right: 10px;
	}
	.tips{
		display: flex;
		align-items: center;
		padding-left: 30rpx;
		margin-top: 10rpx;
		font-size: 12px
	}
	.tips{
		
	}
	.checkbox{
		height: 16px;
		width: 16px;
		display: flex;
		border-radius: 2px;
		background: #4382ff;
		align-items: center;
		justify-content: center;
		margin-right: 5px;
		color: white;
		border: 1px solid #4382ff;
		cursor:'pointer'
	}
	.checkbox2{
		height: 16px;
		width: 16px;
		display: flex;
		border-radius: 2px;
		background: white;
		align-items: center;
		justify-content: center;
		margin-right: 5px;
		color: white;
		border: 1px solid #4382ff;
		cursor:'pointer'
	}
</style>
